<template>
	<view v-if="news" class="news-detail">
		<view class="content-news" v-if="news.contentType === newsType.content">
			<view class="title">{{news.title}}</view>
			<view class="time">发布时间：{{news.createTime.substring(0, 10)}}</view>
			<rich-text :nodes="news.content"></rich-text>
			<!-- <view v-html="news.content"></view> -->
		</view>
		<view class="video-news" v-if="news.contentType === newsType.video">
			<video class="video" :src="videoUrl" @play="play" @error="error" @waiting="waiting"></video>
			<view class="title">{{news.title}}</view>
			<view class="section">
				<view class="section-title">
					<span></span>简介
				</view>
				<view class="section-content">{{news.brief}}</view>
			</view>
			<view class="section">
				<view class="section-title">
					<span></span>发布时间
				</view>
				<view class="section-content">{{news.createTime || ''}}</view>
			</view>
			<view class="section">
				<view class="section-title">
					<span></span>浏览人次
				</view>
				<view class="section-content">{{news.hits}}人次</view>
			</view>
		</view>
		<sheet :isFiexd="isFiexd" :topLocation="topLocation" @close="isFiexd = false">
			<view style="color: #828282;font-size:24upx;line-height: 100upx;text-align: center;">分享到</view>
			<view style="display: flex;font-size:22upx;color: #828282;justify-content: space-between;padding: 10upx 50upx;">
				<view class="share-box" @click="shareSpace">
					<image class="share-icon" src="../../static/icon/share-space.png" />
					<view>QQ空间</view>
				</view>
				<view class="share-box" @click="shareWechat">
					<image class="share-icon" src="../../static/icon/share-wechat.png" />
					<view>微信好友</view>
				</view>
				<view class="share-box" @click="shareFriends">
					<image class="share-icon" src="../../static/icon/share-friends.png" />
					<view>微信朋友圈</view>
				</view>
				<view class="share-box" @click="shareQQ">
					<image class="share-icon" src="../../static/icon/share-qq.png" />
					<view>QQ好友</view>
				</view>
			</view>
		</sheet>
	</view>
</template>

<script>
	import {
		post_md5,
		request_integral
	} from '../../common/request'
	import {
		richText
	} from '../../common/common'

	export default {
		data() {
			return {
				videoUrl: '',
				news: {
					brief: '',
					createTime: '',
					hits: '',
					contentType: '',
					title: '',
					content: ''
				},
				collectId: '',
				id: '',
				isFiexd: false,
				topLocation: '78%',
				newsType: {
					content: 0,
					video: 1
				}
			}
		},
		onLoad(options) {
			this.id = options.id
			this.type = options.type
			this.getDetail(options)
			request_integral('news', this.id)
		},
		onNavigationBarButtonTap(e) {
			if (e.index == 0) {
				this.collect()
			}
			if (e.index == 1) {
				this.isFiexd = true
			}
		},
		methods: {
			error(e) {
				console.log(this.videoUrl)
				console.log(e)
				console.log('error')
			},
			waiting(e) {
				console.log(e)
				console.log('waiting')
			},
			play(e) {
				console.log(e)
				console.log(this.videoUrl)
			},
			async getDetail(options) {
				let res = await post_md5('/news-app/news/info', {
					id: options.id,
					userId: uni.getStorageSync('userId')
				})
				this.news = res.data
				this.news.content = richText(this.news.content)
				if (this.news.contentType === this.newsType.video) {
					this.loadVideoUrl(this.news.videoUrl)
				}
				this.selectCollect()
			},
			async loadVideoUrl(publicUrl) {
				let res = await post_md5('/sys/oss/privatevideodownloadurl', {
					publicUrl: publicUrl
				})
				this.videoUrl = res.data
			},
			// 查询收藏信息
			selectCollect() {
				const params = {
					newsType: this.type,
					type: 1,
					userId: uni.getStorageSync('userId'),
					idInfo: this.id
				}
				post_md5('/usercenter-app/collect/iscollect', params, false).then(res => {
					// #ifdef APP-PLUS
					var webView = this.$mp.page.$getAppWebview()
					if (res.data == -1) {
						webView.setTitleNViewButtonStyle(0, {
							text: '\ue603'
						})
					} else {
						webView.setTitleNViewButtonStyle(0, {
							text: '\ue6c8'
						})
						this.collectId = res.data
					}
					// #endif
				})
			},
			// 收藏
			collect() {
				if (this.collectId !== '') {
					const params = {
						id: this.collectId
					}
					post_md5('/usercenter-app/collect/cancelcollect', params, false).then(
						res => {
							// #ifdef APP-PLUS
							var webView = this.$mp.page.$getAppWebview()
							webView.setTitleNViewButtonStyle(0, {
								text: '\ue603'
							})
							this.collectId = ''
							uni.showToast({
								title: '取消收藏',
								icon: 'none'
							})

							var pages = getCurrentPages()
							var prevPage = pages[pages.length - 2] //上一个页面
							//直接调用上一个页面的setData()方法，把数据存到上一个页面中去
							prevPage.setData({
								removeNewsId: this.id
							})
							// #endif
						}
					)
				} else {
					const params = {
						type: 1,
						userId: uni.getStorageSync('userId'),
						idInfo: this.id,
						newsType: this.type
					}
					post_md5('/usercenter-app/collect/collectInfo', params, false).then(
						res => {
							// #ifdef APP-PLUS
							var webView = this.$mp.page.$getAppWebview()
							webView.setTitleNViewButtonStyle(0, {
								text: '\ue6c8'
							})
							this.collectId = res.data
							uni.showToast({
								title: '收藏成功',
								icon: 'none'
							})
							// #endif
						}
					)
				}
			},
			// 分享到QQ空间
			shareSpace() {
				var params =
					'/pages/news/news-detail?id=' + this.id + '&type=' + this.type
				uni.share({
					provider: 'qq',
					type: 0,
					// href: "http://kxy.yuzhekeji.top:12345/wx.html?params=" + String(params),
					href: 'http://kxy.yuzhekeji.top:12345/iOS.html?url=' + String(params),
					title: this.title,
					imageUrl: '../../static/logo/logo1024x1024.png',
					success() {
						uni.showToast({
							title: '分享成功',
							icon: 'none'
						})
					},
					fail() {
						uni.showToast({
							title: '分享失败',
							icon: 'none'
						})
					}
				})
			},

			// 分享给微信好友
			shareWechat() {
				var params =
					'/pages/news/news-detail?id=' + this.id + '&type=' + this.type
				uni.share({
					provider: 'weixin',
					scene: 'WXSceneSession',
					type: 0,
					href: 'http://kxy.yuzhekeji.top:12345/iOS.html?url=' + String(params),
					title: this.title,
					imageUrl: '../../static/logo/logo1024x1024.png',
					success() {
						uni.showToast({
							title: '分享成功',
							icon: 'none'
						})
					},
					fail() {
						uni.showToast({
							title: '分享失败',
							icon: 'none'
						})
					}
				})
			},

			// 分享到朋友圈
			shareFriends() {
				var params =
					'/pages/news/news-detail?id=' + this.id + '&type=' + this.type
				uni.share({
					provider: 'weixin',
					scene: 'WXSenceTimeline',
					href: 'http://kxy.yuzhekeji.top:12345/iOS.html?url=' + String(params),
					title: this.title,
					imageUrl: '../../static/logo/logo1024x1024.png',
					success() {
						uni.showToast({
							title: '分享成功',
							icon: 'none'
						})
					},
					fail() {
						uni.showToast({
							title: '分享失败',
							icon: 'none'
						})
					}
				})
			},

			// 分享给QQ好友
			shareQQ() {
				var params =
					'/pages/news/news-detail?id=' + this.id + '&type=' + this.type
				uni.share({
					provider: 'qq',
					type: 0,
					href: 'http://kxy.yuzhekeji.top:12345/wx.html?params=' + String(params),
					title: this.title,
					imageUrl: '../../static/logo/logo1024x1024.png',
					success() {
						uni.showToast({
							title: '分享成功',
							icon: 'none'
						})
					},
					fail() {
						uni.showToast({
							title: '分享失败',
							icon: 'none'
						})
					}
				})
			}
		}
	}
</script>

<style lang="less">
	.news-detail {
		width: 100%;
	}

	.content-news {
		background: #ffffff;
		padding: 10upx 40upx;

		.title {
			text-align: center;
			font-size: 40upx;
			font-weight: 600;
			margin-bottom: 20upx;
		}

		.time {
			color: #888;
			font-size: 24upx;
			margin-bottom: 10upx;
		}
	}

	.video-news {
		.video {
			width: 100%;
			height: 420upx;
		}

		.title {
			background: rgba(255, 255, 255, 1);
			border-bottom: 1px solid rgba(222, 226, 237, 1);
			line-height: 32upx;
			font-size: 30upx;
			font-weight: bold;
			padding: 30upx 40upx;
		}

		.section {
			padding: 24upx 40upx 40upx 40upx;
			border-bottom: 1px solid #eee;

			.section-title {
				font-size: 24upx;
				font-weight: bold;

				::before {
					content: ' ';
					height: 20upx;
					width: 4upx;
					background-color: #409eff;
					margin-right: 6upx;
					display: inline-block;
				}
			}

			.section-content {
				font-size: 24upx;
				margin-top: 20upx;
				margin-left: 10upx;
				padding-left: 10upx;
			}
		}
	}

	.share-box {
		width: 120upx;
		text-align: center;
		line-height: 40upx;
	}

	.share-icon {
		width: 76upx;
		height: 76upx;
	}
</style>
